﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="/css/bootstrap.css" rel="stylesheet" />
    <link href="/css/bootstrap-theme.css" rel="stylesheet" />
    <link href="/css/site.css" rel="stylesheet" />

    <script src="/js/jquery.js"></script>
    <script src="/js/jquery_goup.js"></script>
    <script src="/js/highlight_min.js"></script>
    <script src="/js/highlight_pack.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/vue-lazyload.js"></script>
    <script src="/js/marked.js"></script>
    <script src="/js/lodash.js"></script>
    <script src="/js/ModuleLoader.js"></script>
    <script src="/js/bootstrap.js"></script>
    <script src="/js/FastHttpApi.js"></script>
    <script src="/js/Site.js"></script>
    <script src="/js/Monitor.js"></script>
    <title></title>
</head>
<body>


    <div class="navbar navbar-inverse navbar-fixed-left" slot="site-header">

    </div>

    <div class="container bs-docs-container">
        <div class="row">
            <div class="col-md-8" role="main">
               
                <div id="lstBlog">
                    <p id="searchText" style="display:none;padding-top:10px;margin-bottom:0px;"></p>
                    <div class="blog-item" v-for="item in Data">
                        <div class="panel-body">
                            <div class="form-inline blog-title">
                                <span v-if="item.SourceUrl" class="label label-warning blog-type">转</span>

                                <span v-else class="label label-success blog-type">原</span>

                                <h4>
                                    <a v-bind:href="['/blog/'+item.ID+'.html']">{{item.Title}}</a>
                                </h4>
                            </div>
                            <div style="margin-bottom:6px;">
                                <span class="btn btn-xs"><img src="/images/date.png" />{{item.CreateTime}}</span>
                                <a :href="['/cate/'+item.CategoryID+'.html']"><img src="/images/category.png" /> {{item.Category}}</a>
                                <img src="/images/tags.png" />
                                <a v-for="tag in item.Tags" :href="['/tag/'+encodeURIComponent(tag)+'.html']" :class="[getColor()]">{{tag}}</a>
                            </div>
                            <div>{{item.Summary}}</div>
                        </div>
                    </div>

                    <nav aria-label="Page navigation">
                        <ul id="pagination" class="pagination"></ul>
                    </nav>
                </div>
            </div>
            <div class="col-md-4 leftPack">

                <h4>关于</h4>
                <div slot="about"> </div>
                <h4>系统资源</h4>
                <div slot="system_info"> </div>
                <h4>热门标签</h4>
                <div slot="tags"></div>
                <h4>置顶</h4>
                <div slot="topBlog"></div>
                <h4>最新文章</h4>
                <div slot="newBlog"></div>
                <h4>最新评论</h4>
                <div slot="topComment"></div>
            </div>
        </div>
    </div>

    <div class="container" style="text-align:center;" slot="footer">

    </div>

    <script>

        var btnStyles = ["btn btn-default btn-xs", "btn btn-primary btn-xs",
            "btn btn-success btn-xs", "btn btn-default btn-xs", "btn btn-info btn-xs", "btn btn-warning btn-xs", "btn btn-default btn-xs", "btn btn-danger btn-xs"];
        var colorIndex = 0;

        var cate = null;
        var searchText = null;
        var tag = null;

        function getColor() {
            colorIndex++;
            return btnStyles[colorIndex % btnStyles.length];
        }

        var lstBlogControl;
        $(document).ready(function () {
            lstBlogControl = new Vue({ el: '#lstBlog', data: { Data: [] } });
            setTimeout(function () {
                $('pre code').each(function (i, block) {
                    hljs.highlightBlock(block);
                    $('pre code').css("background-color", '#ffffff');
                    $('pre code').css("color", '#000');
                });
            }, 500);
            $.goup({
                trigger: 100,
                bottomOffset: 50,
                locationOffset: 20,
                title: '',
                titleAsText: true
            });
            var index = _url.queryString["page"];
            if (!index)
                index = 0;
            else
                index = parseInt(index);
            if (_url.fileNameWithOutExt) {
                if (_url.folder.indexOf("search") >= 0) {
                    searchText = _url.fileNameWithOutExt;
                }
                else if (_url.folder.indexOf("tag") >= 0) {
                    tag = _url.fileNameWithOutExt;
                }
                else if (_url.folder.indexOf("cate") >= 0) {
                    cate = _url.fileNameWithOutExt;
                }
                else {
                }
            }
            search(index);
        });


        function search(index) {
            SiteSearch(cate, tag, searchText, index).execute(function (r) {
                if (searchText) {
                    $('#searchText').show();
                    if (r.Data.Count > 0)
                        $('#searchText').html('<span class="btn btn-success "style="border:none">搜索符合"' + searchText + '"的有:' + r.Data.Count + '条数据</span>');
                    else
                        $('#searchText').html('<span class="btn btn-warning "style="border:none">没找到符合"' + searchText + '"相关数据</span>');
                }
                else {
                    $('#searchText').hide();
                }

                lstBlogControl.Data = r.Data.Items;
                pagination_blog(index, r.Data.Pages);
            });
            window.scrollTo(0, 0);
        }

        function blogSearch() {
            var text = $('#txtSearch').val();

            if (text) {
                window.location.href = "/search/" + encodeURIComponent(text) + ".html";
            }
        }

        function pagination_blog(index, pages) {
            if (pages <= 1)
                return;
            $('#pagination').empty();
            if (pages < 10) {
                for (i = 0; i < pages; i++) {
                    var item = '<li><a  class="btn-xs" page="' + i + '" href="?page=' + i + '">' + (i + 1) + '</a></li>';
                    $('#pagination').append(item);
                }
            }
            else {
                var item = '<li><a  class="btn-xs" page="' + 0 + '" href="javascript:void(0)">1</a></li>';
                $('#pagination').append(item);


                for (i = index - 5; i < index + 1; i++) {
                    if (i > 0 && i < pages - 1) {
                        var item = '<li><a  class="btn-xs" page="' + i + '" href="?page=' + i + '">' + (i + 1) + '</a></li>';
                        $('#pagination').append(item);
                    }
                }


                for (i = index + 1; i < index + 5; i++) {
                    if (i < (pages - 1)) {
                        var item = '<li><a  class="btn-xs" page="' + i + '" href="?page=' + i + '">' + (i + 1) + '</a></li>';
                        $('#pagination').append(item);
                    }
                }
                if (pages > 1) {
                    var item = '<li><a class="btn-xs" page="' + (pages - 1) + '" href="?page=' + (pages - 1) + '">' + (pages) + '</a></li>';
                    $('#pagination').append(item);
                }
            }
            $('a').each(function () {
                if ($(this).attr('page')) {
                    $(this).css("margin", "2px")
                };
                if ($(this).attr('page') == index) {
                    $(this).html('<span class="badge">' + (index + 1) + '</span>');
                }
            })
        }
    </script>
</body>

</html>